<html>
<head>
	<!--MOCHAUI-->
	<script type="text/javascript" src="../../../Demo/scripts/mootools-1.3.0-core-nocompat-yc.js"></script>
	<script type="text/javascript" src="../../../Demo/scripts/mootools-1.3.0-more-yc.js"></script>
	<script type="text/javascript" src="../../Core/core.js"></script>
	<script type="text/javascript" src="../../Core/persist.js"></script>
	<script type="text/javascript" src="../../Core/content.js"></script>
	<script type="text/javascript" src="../../Core/desktop.js"></script>
	<script type="text/javascript" src="../column/column.js"></script>
	<script type="text/javascript" src="../panel/panel.js"></script>
	<script type="text/javascript" src="../taskbar/taskbar.js"></script>
	<script type="text/javascript" src="../window/window.js"></script>
	<script type="text/javascript" src="../window/modal.js"></script>
	<!--MOCHAUI-->
	<script type="text/javascript" src="grid.js"></script>
	<script type="text/javascript">

		var dataGrid;

		function gridButtonClick(button) {
			alert(button);
		}

		function onGridSelect() {
		}

		function onGridDblClick() {
		}

		function filterGrid() {
			dataGrid.filter($('filter').value);
		}

		function clearFilter() {
			dataGrid.clearFilter();
		}

		function getSelectedIndices() {
			var indices = dataGrid.getSelectedIndices();

			if (indices.length == 0) {
				alert('No selection.');
				return;
			}

			var str = '';
			for (var i = 0; i < indices.length; i++) {
				str += 'row: ' + indices[i] + ' data: ' + dataGrid.getDataByRow(indices[i]) + '\n';
			}

			alert(str);
		}

		function deleteSelectedRow() {
			var indices = dataGrid.getSelectedIndices();
			for (var i = 0; i < indices.length; i++) {
				dataGrid.deleteRow(indices[i]);
			}
		}

		function refresh() {
			dataGrid.refresh();
		}

		function accordionFunction(obj) {
			obj.parent.set('html', '<div style="padding:5px"> Row ' + obj.row + '<br/><br/>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div>');
		}

		window.addEvent("domready", function() {

			dataGrid = new MUI.Grid({
				'id':'grid',
				columns: [
							{
								header: "Name",
								name: 'name',
								dataType:'string'
							},
							{
								header: "Address",
								name: 'address',
								dataType:'string'
							},
							{
								header: "City",
								name: 'city',
								dataType:'string'
							},
							{
								header: "State",
								name: 'state',
								dataType:'string'
							},
							{
								header: "Zip",
								name: 'zip',
								dataType:'string'
							}
						],
				buttons : [
					{name: 'Add', cssClass: 'add', 'click': gridButtonClick},
					{name: 'Delete', cssClass: 'delete', 'click': gridButtonClick},
					{separator: true},
					{name: 'Duplicate', cssClass: 'duplicate', 'click': gridButtonClick}
				],
				accordion:true,
				accordionRenderer:accordionFunction,
				autoSectionToggle:false,

				content:{
					url:"/mochaui-grails/person/list?page={page}&max={pageSize}&order={dir}&sort={sort}",
					persist:true,
					paging: {
						pageSize:10,
						page:1
					}
				},

				showHeader: true,
				sortHeader: true,
				alternateRows: true,
				resizeColumns: true,
				multipleSelection:true,
				width:600,
				height: 220
			});

			dataGrid.addEvent('click', onGridSelect);
			dataGrid.addEvent('dblclick', onGridDblClick);
		});

	</script>
	<link rel="stylesheet" type="text/css" href="../../Themes/default/css/grid.css"/>

</head>

<body>

<div id="page">
	<div id="grid">
	</div>
</div>

</body>
</html>